import {Component} from "react";
import {Button, Col, Divider, InputNumber, Modal, Row} from "antd";
import LazyIcon from "../../src/components/Tools/Icon";
import {Edge, Graph} from "@antv/x6";

import {
    buildGraph, GraphTools
} from "./definition.tsx";

/** 图形渲染 */
class GraphDetail extends Component<
    {
        data: object
    },
    {
        visible: boolean,

        proportionalEdge: null | Edge,
        proportionalModalVisible: boolean,
        proportionalModalValue: number
    }
> {

    private graph: Graph | undefined;
    private graphTools: GraphTools | undefined;

    state = {
        visible: false,

        // ~ 股权占比的相关状态
        proportionalEdge: null,
        proportionalModalVisible: false, // 输入股权占比的 Modal 的可见性
        proportionalModalValue: 100, // 输入股权占比的 Modal 的值
    }

    showGraphDetail() {
        this.setState({visible: true})
    }

    handleSubmit() {
        const data = JSON.stringify(this.graph?.toJSON());
        console.log(`data ${data}`)
        this.setState({visible: false})
        alert('todo: submit')
    }

    componentDidUpdate() {
        if (this.graph instanceof Graph) {
            return
        }

        const {data} = this.props


        this.graph = buildGraph(document.getElementById('container') || undefined)
        this.graph = data ? this.graph.fromJSON(data) : this.graph
        this.graphTools = new GraphTools(this.graph).registerEvents(this)

        console.log('[Graph] Graph modal updated.');
    }

    // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    render() {
        const {visible, proportionalModalVisible} = this.state;

        return (
            <>
                <Modal title="架构图调整" open={visible} centered keyboard width={"85%"}
                       okText={"修改"} okButtonProps={{icon: <LazyIcon iconName={"CheckOutlined"}/>, danger: true}} onOk={() => this.handleSubmit()}
                       cancelText={"取消"} cancelButtonProps={{icon: <LazyIcon iconName={"CloseOutlined"}/>}} onCancel={() => this.setState({visible: false})}>
                    <Row gutter={15}>
                        <Col span={5}>
                            <Button block onClick={() => (this.graphTools as GraphTools).center()}>居中</Button>
                            <Divider/>

                            <Button block onClick={() => (this.graphTools as GraphTools).addCompany()}>添加公司</Button>
                            <Button style={{marginTop: 8}} block onClick={() => (this.graphTools as GraphTools).addNewCompany()}>添加拟新设公司</Button>
                            <Button style={{marginTop: 8}} block onClick={() => (this.graphTools as GraphTools).addCanceledCompany()}>添加拟注销公司</Button>

                            <Divider/>
                            <Button block onClick={() => (this.graphTools as GraphTools).addHolder()}>添加自然人</Button>
                            <Divider/>
                            <Button block onClick={() => (this.graphTools as GraphTools).addText()}>添加文本框</Button>
                        </Col>
                        <Col span={19}>
                            <div style={{width: '100%', minHeight: '600px'}}>
                                <Modal title={"请输出股权占比"} open={proportionalModalVisible}
                                       okText="确定" onOk={() => (this.graphTools as GraphTools).setEdgeLabel(this)}
                                       cancelText="不设占比" onCancel={() => this.setState({proportionalModalVisible: false})}>
                                    <InputNumber style={{width: '100%'}} addonAfter="%" defaultValue={100} min={1} max={100} onChange={(val) => {
                                        if (val == null) {
                                            return
                                        }
                                        this.setState({proportionalModalValue: val})
                                    }}/>
                                </Modal>
                                <div id={"container"}></div>
                            </div>
                        </Col>
                    </Row>
                </Modal>
            </>
        )
    }
}

export default GraphDetail;
